<template>
  <div id="datail">
    <!-- 页头 -->
    <PageHeader :lang="lang"></PageHeader>
    <!-- 搜索 -->
    <search></search>
    <section class="main" id="pageBody">
      <!-- 面包屑 -->
      <div class="crumbs">
        <router-link to="/help" v-text="lang.footHelpCenter"></router-link> <i>&gt;</i>
        <router-link :to="{name: 'hlist', params: {id: formateText(content.FHelpsClassIDs)}}">{{content.FHelpsClassNames | formateText}}</router-link><i>&gt;</i>
        <span>{{content.Title}}</span>
      </div>

      <div class="article">
        <div class="content">
          <div class="list">
            <h3>{{lang['Other articles in this group']}}</h3>
            <ul>
              <li v-for="item in list" v-bind:class="{'active' : content.ID === item.ID}" @click="getDetailContent(item.ID)">{{item.Title}}</li>
            </ul>
            <div class="more" v-if="totalItem > 10">
              <router-link :to="{name: 'hlist', params: {id: formateText(content.FHelpsClassIDs)}}">{{lang.indexMore}}</router-link>
            </div>
          </div>
          <div class="html">
            <div class="title">
              {{content.Title}}
              <span class="time">IDCM<font>{{content.CreateTime}}</font></span>
            </div>
            <div class="text" v-html="content.Context"></div>
            <div class="share">
              <span v-text="lang.helpShare"></span>
              <!-- 分享插件 -->
              <div class="wrap">
                <share :config="config"></share>
                <div class="icon-btn">
                  <img src="./images/wechat.png" />
                  <img src="./images/qq.png" />
                  <img src="./images/weibo.png" />
                  <img src="./images/fb.png" />
                  <img src="./images/twitter.png" />
                  <img src="./images/tel.png" @click="toTelegram"/>
                </div>
              </div>
            </div>
            <div class="feedback-btn">
              <span v-text="lang.helpLinkToFeedback"></span>
              <router-link to="/help/feedback" v-text="lang.helpDetailFootBtn"></router-link>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>

<script>
import Search from './search.vue'
import commonMixins from '@/mixins/common.js'
import {mapActions} from 'vuex'
import Share from 'vue-social-share'
import Vue from 'vue'
import 'vue-social-share/dist/client.css'

export default {
  mixins: [commonMixins],
  data () {
    return {
      id: '',
      langkey: '',
      list: [],
      totalItem: 0,
      config: {
        sites: ['wechat', 'qq', 'weibo', 'facebook', 'twitter'],
        wechatQrcodeTitle: ''
      },
      content: {
        Context: '',
        CreateID: '',
        CreateTime: '',
        FHelpsClassIDs: '',
        FHelpsClassNames: '',
        HelpsClassID: '',
        ID: '',
        IsDraft: '',
        IsRecommend: '',
        IsRelease: '',
        IsShow: '',
        Keywords: '',
        LanguageType: '',
        ReleaseTime: '',
        SearchEndTime: '',
        SearchKey: '',
        SearchStartTime: '',
        SortNumber: '',
        Title: '',
        sortName: '',
        sortOrder: ''
      }
    }
  },
  components: {
    Share,
    Search
  },
  filters: {
    formateText (val) {
      return (val && val.split(',')[0]) || val
    }
  },
  watch: {
    langKey () {
      let lk = window.localStorage.getItem('langKey')
      this.langkey = lk === 'zh-CN' ? 'zh-CN' : 'en'
      this.list = []
      this.getDetailContent(this.id)
      this.switchLang(this.langkey)
    }
  },
  methods: {
    ...mapActions([ 'switchLang' ]),
    // 电报跳转
    toTelegram () {
      window.open('https://telegram.me/share/url?url=' + window.location.href + '&text=' + this.content.Title, '_blank')
    },
    // 获取问题类型列表
    getTypeList () {
      let self = this
      this.$http.post('Helps/GetList', {
        pageIndex: 0,
        pageSize: 10,
        LanguageType: self.langKey === 'zh-CN' ? 'zh-CN' : 'en',
        helpsTypeID: self.content.FHelpsClassIDs
      })
      .then((res) => {
        if (res) {
          self.list = res.Data || []
          self.totalItem = res.TotalItem
        }
      })
    },
    // 详情内容
    getDetailContent (id) {
      var self = this
      this.$http.get('Helps/Get', {
        id: id,
        LanguageType: self.langKey === 'zh-CN' ? 'zh-CN' : 'en'
      }, {
        isQueryString: true
      })
      .then((res) => {
        self.content = res || {}
        if (self.list.length === 0) {
          self.getTypeList()
        }
      })
    },
    formateText (val) {
      return (val && val.split(',')[0]) || val
    }
  },
  created () {
    this.config.wechatQrcodeTitle = this.lang.helpWecharTips
  },
  mounted () {
    let self = this
    self.langkey = window.localStorage.getItem('langKey') || 'zh-CN'
    self.id = this.$route.params.id || ''
    self.getDetailContent(self.id)
  }
}
</script>

<style lang="less">

#datail {
  color: #fff;

  .main {
    width: 1200px;
    margin: 0 auto;

    .crumbs {
      width: 100%;
      margin: 30px 0;
      font-size: 14px;
      color: #ccc;
      a, i {
        color: #3782FF;

        &:hover {
          color: #3782FF;
          text-decoration: underline;
        }
      }
    }

    .article {
      position: relative;
      box-sizing: border-box;
      margin: 40px auto 0;

      .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #ccc;

        .list {
          width: 200px;
          margin-right: 50px;
          h3 {
            margin-bottom: 20px;
            font-size: 14px;
          }
          ul {
            width: 200px;
            li {
              width: 100%;
              margin: 10px 0;
              padding: 14px;
              box-sizing: border-box;
              cursor: pointer;

              a {
                color: #fff;
              }
            }
            li:hover {
              .active;
            }
            .active {
              background: #3782FF;
              border-radius: 6px;
              color: white;
            }
          }

          .more {
            width: 70%;
            margin: 30px auto 30px 0;
            padding: 6px;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid #3782FF;
            border-radius: 4px;
            cursor: pointer;
            a {
              color: white;
              font-size: 12px;
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }

          .more:hover {
            background-color: #3782FF;
          }
        }

        .html {
          flex: 1;

          .title {
            font-size: 16px;
            padding-bottom: 12px;
            margin-bottom: 0;

            .time {
              position: absolute;
              right: 0;
              top: 0;
              font-size: 14px;
              color: #ccc;

              font {
                  margin-left: 20px;
              }
            }
          }

          .text {
            padding: 30px 0;

            p, span, i, div, em, b, h1, h2, h3, h4, h5, h6 {
              color: #ccc;
            }
          }
        }
      }

      .share {
        margin-top: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid #48576A;
        display: flex;
        align-items: center;

        .wrap {
          position: relative;
          display: flex;
          flex-direction: row;
          text-align: center;

          img {
            width: 30px;
            vertical-align: middle;
            margin-left: 20px;
          }

          .social-share {
            .social-share-icon {
              width: 30px;
              height: 30px;
              padding: 0;
              margin: 0 0 0 16px;
              opacity: 0;
              z-index: 2;

              img {
                width: 100%;
              }
            }

            /*=== 覆盖插件的字体图标 ===*/
            .icon-wechat {
              border-color: #3782FF;

              .wechat-qrcode {
                width: 150px;
                height: 150px;
                top: -164px;
                left: -62px;
                img {
                  margin: 0;
                }
                &:before {
                  content: '';
                  width: 130px;
                  height: 130px;
                  position: absolute;
                  top: 94px;
                  left: 80px;
                  transform: translate(-50%, -50%);
                  background-image: url('./images/wechat-code.png');
                  background-size: 92%;
                  background-repeat: no-repeat;
                }
              }
              .help {
                display: none;
              }
              .qrcode {
                display: none;
              }
            }
            .icon-wechat:hover {
              background: none;
            };
            .icon-wechat::before {
              content: '';
              background-image: url('./images/wechat-code.png');
            }
            a:nth-child(1) {
              opacity: 1;
            }
          }

          .icon-btn {
            position: absolute;
            left: 0px;
            top: 0;
            z-index: 1;
            display: flex;
            flex-direction: row;
            align-items: center;

            img {
              width: 32px;
              margin-left: 16px;
            }
          }
        }
      }
      .feedback-btn {
        margin: 30px auto;
        text-align: center;

        a {
          color: #3782FF;
        }
      }
    }
  }

  /*== 800px ==*/
  @media only screen and (max-width: 1200px) {
    .main {
      width: 760px;
    }
  }
}
</style>
